<template>
    <div class="scroll_main">
        <div class="page-container">
            <!-- 顶部导航 -->
            <headerIndex></headerIndex>

            <!-- 主体内容区 -->
            <el-container>
                <el-main class="main-container">
                    <el-container direction="vertical" class="job-container">
                        <!-- 筛选区域 -->
                        <el-card shadow="never" class="filter-card">
                            <!-- 公司地点筛选 -->
                            <el-row class="filter-section" align="middle">
                                <el-col :xs="24" :sm="4" :md="3" class="filter-title"> 公司地点 </el-col>
                                <el-col :xs="24" :sm="20" :md="21">
                                    <el-space wrap :size="10">
                                        <el-tag
                                            v-for="(item, index) in regionOptions"
                                            :key="index"
                                            :type="activeFilters.region === item ? 'primary' : ''"
                                            :effect="activeFilters.region === item ? 'dark' : 'plain'"
                                            size="default"
                                            class="filter-tag"
                                            @click="handleRegionFilter(item)"
                                        >
                                            {{ item }}
                                        </el-tag>
                                    </el-space>
                                </el-col>
                            </el-row>

                            <el-divider />

                            <!-- 行业类型筛选 -->
                            <el-row class="filter-section" align="middle">
                                <el-col :xs="24" :sm="4" :md="3" class="filter-title"> 行业类型 </el-col>
                                <el-col :xs="24" :sm="20" :md="21">
                                    <el-space wrap :size="10">
                                        <el-tag
                                            v-for="(item, index) in industryOptions"
                                            :key="index"
                                            :type="activeFilters.industries.includes(item) ? 'primary' : ''"
                                            :effect="activeFilters.industries.includes(item) ? 'dark' : 'plain'"
                                            size="default"
                                            class="filter-tag"
                                            @click="handleIndustryFilter(item)"
                                        >
                                            {{ item }}
                                        </el-tag>
                                    </el-space>
                                </el-col>
                            </el-row>

                            <el-divider />

                            <!-- 融资阶段筛选 -->
                            <el-row class="filter-section" align="middle">
                                <el-col :xs="24" :sm="4" :md="3" class="filter-title"> 融资阶段 </el-col>
                                <el-col :xs="24" :sm="20" :md="21">
                                    <el-space wrap :size="10">
                                        <el-tag
                                            v-for="(item, index) in financingOptions"
                                            :key="index"
                                            :type="activeFilters.financing === item ? 'primary' : ''"
                                            :effect="activeFilters.financing === item ? 'dark' : 'plain'"
                                            size="default"
                                            class="filter-tag"
                                            @click="handleFinancingFilter(item)"
                                        >
                                            {{ item }}
                                        </el-tag>
                                    </el-space>
                                </el-col>
                            </el-row>

                            <el-divider />

                            <!-- 公司规模筛选 -->
                            <el-row class="filter-section" align="middle">
                                <el-col :xs="24" :sm="4" :md="3" class="filter-title"> 公司规模 </el-col>
                                <el-col :xs="24" :sm="20" :md="21">
                                    <el-space wrap :size="10">
                                        <el-tag
                                            v-for="(item, index) in sizeOptions"
                                            :key="index"
                                            :type="activeFilters.size === item ? 'primary' : ''"
                                            :effect="activeFilters.size === item ? 'dark' : 'plain'"
                                            size="default"
                                            class="filter-tag"
                                            @click="handleSizeFilter(item)"
                                        >
                                            {{ item }}
                                        </el-tag>
                                    </el-space>
                                </el-col>
                            </el-row>

                            <!-- 清空筛选条件 -->
                            <el-row justify="end" class="clear-filter-row">
                                <el-button
                                    type="danger"
                                    plain
                                    size="small"
                                    @click="resetFilters"
                                    :disabled="isDefaultFilter"
                                    icon="Delete"
                                >
                                    清空筛选条件
                                </el-button>
                            </el-row>
                        </el-card>

                        <!-- 企业展示区域 -->
                        <div class="company-list-container">
                            <el-card shadow="never" class="company-card" :body-style="{ padding: '15px 20px' }">
                                <template #header>
                                    <div class="card-header">
                                        <span class="header-title">
                                            {{ isDefaultFilter ? "热门推荐" : "筛选结果" }}
                                        </span>
                                        <span v-if="!isDefaultFilter" class="result-count">
                                            (共{{ totalCompanies }}家企业)
                                        </span>
                                    </div>
                                </template>

                                <el-skeleton :loading="loading" :count="8" animated>
                                    <template #template>
                                        <el-row :gutter="20">
                                            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="i in 8" :key="i">
                                                <div class="skeleton-card">
                                                    <el-skeleton-item
                                                        variant="image"
                                                        style="width: 80px; height: 80px; margin: 0 auto"
                                                    />
                                                    <el-skeleton-item
                                                        variant="h3"
                                                        style="width: 80%; margin: 10px auto"
                                                    />
                                                    <div
                                                        style="
                                                            display: flex;
                                                            justify-content: center;
                                                            gap: 5px;
                                                            margin: 10px 0;
                                                        "
                                                    >
                                                        <el-skeleton-item variant="text" style="width: 25%" />
                                                        <el-skeleton-item variant="text" style="width: 25%" />
                                                        <el-skeleton-item variant="text" style="width: 25%" />
                                                    </div>
                                                    <el-skeleton-item
                                                        variant="text"
                                                        style="width: 80%; margin: 5px auto"
                                                    />
                                                    <el-skeleton-item
                                                        variant="text"
                                                        style="width: 60%; margin: 5px auto"
                                                    />
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </template>

                                    <template #default>
                                        <el-empty v-if="!companies.length" description="暂无符合条件的企业" />

                                        <el-row :gutter="20" v-else>
                                            <el-col
                                                :xs="24"
                                                :sm="12"
                                                :md="8"
                                                :lg="6"
                                                v-for="company in companies"
                                                :key="company.id"
                                                class="company-col"
                                            >
                                                <el-card
                                                    shadow="hover"
                                                    class="company-item"
                                                    @click="viewCompanyDetail(company.id)"
                                                >
                                                    <div class="company-logo">
                                                        <el-image :src="company.logo" fit="contain" :alt="company.name">
                                                            <template #error>
                                                                <el-icon><Picture /></el-icon>
                                                            </template>
                                                        </el-image>
                                                    </div>

                                                    <h3 class="company-name">{{ company.name }}</h3>

                                                    <div class="company-tags">
                                                        <el-tag size="small">{{ company.industry }}</el-tag>
                                                        <el-tag size="small" type="info">{{
                                                            company.financing
                                                        }}</el-tag>
                                                        <el-tag size="small" effect="plain">{{ company.size }}</el-tag>
                                                    </div>

                                                    <el-divider content-position="center">热门职位</el-divider>

                                                    <div class="company-jobs">
                                                        <el-link
                                                            v-for="(job, index) in company.hotJobs.slice(0, 3)"
                                                            :key="index"
                                                            type="primary"
                                                            :underline="false"
                                                            @click.stop="viewJobDetail(job.id)"
                                                        >
                                                            {{ job.title }}
                                                            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                                                        </el-link>
                                                    </div>
                                                </el-card>
                                            </el-col>
                                        </el-row>

                                        <!-- 分页控件 -->
                                        <div class="pagination">
                                            <el-pagination
                                                background
                                                layout="total, sizes, prev, pager, next"
                                                :page-sizes="[12, 24, 36, 48]"
                                                :total="totalCompanies"
                                                :current-page="currentPage"
                                                :page-size="pageSize"
                                                @size-change="handleSizeChange"
                                                @current-change="handlePageChange"
                                            />
                                        </div>
                                    </template>
                                </el-skeleton>
                            </el-card>
                        </div>
                    </el-container>
                </el-main>
            </el-container>

            <!-- 底部导航 -->
            <footerIndex></footerIndex>
        </div>
        <el-backtop :bottom="80" target=".scroll_main" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowRight, Picture, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

const router = useRouter();

// 筛选选项
const regionOptions = [
    "全国",
    "北京",
    "上海",
    "广州",
    "深圳",
    "杭州",
    "天津",
    "西安",
    "武汉",
    "厦门",
    "长沙",
    "成都",
    "重庆",
    "全部城市",
];
const industryOptions = [
    "水利",
    "电子商务",
    "游戏",
    "社交网络/社区",
    "广告营销",
    "大数据",
    "医疗健康",
    "生活服务(O2O)",
    "O2O",
    "智能",
    "分类信息",
    "音乐/视频/娱乐",
    "在线教育",
    "社交网络",
    "人力资源服务",
    "企业服务",
    "信息安全",
    "智能硬件",
    "移动互联网",
    "互联网金融",
    "电子商务平台",
    "广告/公关/会展",
    "物联网",
    "出海项目",
];
const financingOptions = ["不限", "未融资", "天使轮", "A轮", "B轮", "C轮", "D轮及以上", "已上市", "不需要融资"];
const sizeOptions = ["不限", "0-20人", "20-99人", "100-499人", "500-999人", "1000-9999人", "10000人以上"];

// 筛选状态
const activeFilters = reactive({
    region: "全国",
    industries: [] as string[],
    financing: "不限",
    size: "不限",
});

// 判断是否为默认筛选
const isDefaultFilter = computed(() => {
    return (
        activeFilters.region === "全国" &&
        activeFilters.industries.length === 0 &&
        activeFilters.financing === "不限" &&
        activeFilters.size === "不限"
    );
});

// 分页相关
const currentPage = ref(1);
const pageSize = ref(12);
const totalCompanies = ref(96);
const loading = ref(false);

// 模拟企业数据
const companies = ref([
    {
        id: "1",
        name: "快手",
        logo: "https://img.bosszhipin.com/beijin/mcs/banner/fff9b16bcbb78e2453884865d2c4c7e7cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0",
        industry: "社交网络/社区",
        financing: "已上市",
        size: "10000人以上",
        hotJobs: [
            { id: "101", title: "Android开发工程师" },
            { id: "102", title: "网页前端工程师" },
            { id: "103", title: "华为云开发测试" },
        ],
    },
    {
        id: "2",
        name: "百度",
        logo: "https://img.bosszhipin.com/beijin/mcs/banner/00c9c1238ae2c986f3e7741be97a9669cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0",
        industry: "互联网",
        financing: "已上市",
        size: "10000人以上",
        hotJobs: [
            { id: "201", title: "网页前端工程师" },
            { id: "202", title: "SystemUI (HMJ04T315)" },
            { id: "203", title: "iOS" },
        ],
    },
    {
        id: "3",
        name: "华为",
        logo: "https://img.bosszhipin.com/beijin/upload/admin/20241009/7a57a5a743894a0e61db0c9f94e55da3789b92c168491f5575a8c6cfd5eed090fc41aa91be88d106.png.webp?x-oss-process=image/resize,w_120,limit_0",
        industry: "通信/网络设备",
        financing: "不需要融资",
        size: "10000人以上",
        hotJobs: [
            { id: "301", title: "华为云开发测试" },
            { id: "302", title: "网页前端工程师" },
            { id: "303", title: "高级产品经理" },
        ],
    },
    {
        id: "4",
        name: "BOSS直聘",
        logo: "https://img.bosszhipin.com/beijin/mcs/banner/3e9d37e9effaa2b6daf43f3f03f7cb15cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0",
        industry: "人力资源服务",
        financing: "已上市",
        size: "1000-9999人",
        hotJobs: [
            { id: "401", title: "ATS产品经理" },
            { id: "402", title: "SystemUI (HMJ04T315)" },
            { id: "403", title: "iOS" },
        ],
    },
    {
        id: "5",
        name: "好未来",
        logo: "https://img.bosszhipin.com/beijin/mcs/banner/55e497a3c749352df771d48a6ed5d279cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0",
        industry: "互联网",
        financing: "已上市",
        size: "1000-9999人",
        hotJobs: [
            { id: "501", title: "前端开发工程师" },
            { id: "502", title: "后端开发工程师" },
            { id: "503", title: "产品经理" },
        ],
    },
    {
        id: "6",
        name: "滴滴出行",
        logo: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20190408/c23f08b24983fffa26a3a8ba19a463523cc05a6873981b80bf124ddd6c45f629_s.jpg?x-oss-process=image/resize,w_120,limit_0",
        industry: "O2O",
        financing: "D轮及以上",
        size: "1000-9999人",
        hotJobs: [
            { id: "601", title: "高级产品经理" },
            { id: "602", title: "算法工程师" },
            { id: "603", title: "运营专员" },
        ],
    },
    {
        id: "7",
        name: "微讯",
        logo: "https://img.bosszhipin.com/beijin/mcs/bar/20200629/7d893d759ab92844234643d8d033008dbe1bd4a3bd2a63f070bdbdada9aad826.png?x-oss-process=image/resize,w_120,limit_0",
        industry: "通信/网络设备",
        financing: "不需要融资",
        size: "不限",
        hotJobs: [
            { id: "701", title: "产品经理" },
            { id: "702", title: "iOS开发工程师" },
            { id: "703", title: "Android开发工程师" },
        ],
    },
    {
        id: "8",
        name: "中科软",
        logo: "https://img.bosszhipin.com/beijin/mcs/banner/176e11833ff55cf365d0c7f770abe0d3cfcd208495d565ef66e7dff9f98764da.png?x-oss-process=image/resize,w_120,limit_0",
        industry: "不限",
        financing: "已上市",
        size: "1000-9999人",
        hotJobs: [
            { id: "801", title: "计算机软件" },
            { id: "802", title: "算法工程师" },
            { id: "803", title: "产品经理" },
        ],
    },
]);

// 处理地区筛选（单选）
const handleRegionFilter = (region: string) => {
    activeFilters.region = region;
    currentPage.value = 1;
    fetchCompanies();
};

// 处理行业筛选（多选）
const handleIndustryFilter = (industry: string) => {
    const index = activeFilters.industries.indexOf(industry);
    if (index > -1) {
        // 已选中则取消
        activeFilters.industries.splice(index, 1);
    } else {
        // 未选中则添加
        activeFilters.industries.push(industry);
    }
    currentPage.value = 1;
    fetchCompanies();
};

// 处理融资阶段筛选（单选）
const handleFinancingFilter = (financing: string) => {
    activeFilters.financing = financing;
    currentPage.value = 1;
    fetchCompanies();
};

// 处理公司规模筛选（单选）
const handleSizeFilter = (size: string) => {
    activeFilters.size = size;
    currentPage.value = 1;
    fetchCompanies();
};

// 模拟数据获取
const fetchCompanies = () => {
    loading.value = true;

    // 实际项目中应该通过API获取数据
    // axios.get('/api/companies', {
    //    params: {
    //        region: activeFilters.region,
    //        industries: activeFilters.industries,
    //        financing: activeFilters.financing,
    //        size: activeFilters.size,
    //        page: currentPage.value,
    //        pageSize: pageSize.value
    //    }
    // }).then(response => {
    //    companies.value = response.data.items;
    //    totalCompanies.value = response.data.total;
    //    loading.value = false;
    // });

    // 模拟API延迟
    setTimeout(() => {
        loading.value = false;
    }, 800);
};

// 重置所有筛选条件
const resetFilters = () => {
    activeFilters.region = "全国";
    activeFilters.industries = [];
    activeFilters.financing = "不限";
    activeFilters.size = "不限";

    // 重新获取数据
    currentPage.value = 1;
    fetchCompanies();

    // 提示用户已清空筛选条件
    ElMessage({
        message: "已清空所有筛选条件",
        type: "success",
    });
};

// 分页每页条数变化
const handleSizeChange = (size: number) => {
    pageSize.value = size;
    fetchCompanies();
};

// 分页页码变更处理
const handlePageChange = (page: number) => {
    currentPage.value = page;
    fetchCompanies();
};

// 查看公司详情
const viewCompanyDetail = (companyId: string) => {
    router.push({
        path: "/companyInfo",
        query: { id: companyId },
    });
};

// 查看职位详情
const viewJobDetail = (jobId: string) => {
    router.push({
        path: "/jobInfo",
        query: { id: jobId },
    });
};

// 页面加载时获取数据
onMounted(() => {
    fetchCompanies();
});
</script>

<style scoped lang="less">
/* 页面容器样式 */
.page-container {
    width: 100%;
    overflow-x: hidden;
}

/* 主内容区样式 */
.main-container {
    background-color: #ffffff;
    --el-main-padding: 0;
    padding-top: 70px; /* 为固定导航留出空间 */
}

.job-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    gap: 20px;
    box-sizing: border-box;
    padding: 20px 15px;
}

.filter-card,
.company-card {
    margin-bottom: 0;
    padding: 15px 20px;
}

.filter-section {
    margin-bottom: 12px;

    &:last-child {
        margin-bottom: 0;
    }
}

.filter-title {
    color: var(--el-text-color-secondary);
    font-size: 14px;
    line-height: 32px;
}

.filter-tag {
    cursor: pointer;
    margin: 0;
    transition: all 0.2s;
    border-radius: 2px;
    max-width: 100%; /* 确保标签不超出容器 */

    &:hover {
        transform: scale(1.05);
    }
}

.clear-filter-row {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.card-header {
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--el-color-primary);
}

.result-count {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    margin-left: 8px;
}

.skeleton-card {
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company-list-container {
    background-color: #ffffff;

    .company-card {
        border: none;
        box-shadow: none;
        background-color: transparent;
        margin-bottom: 0;

        :deep(.el-card__header) {
            background-color: white;
            border-radius: 4px;
            margin-bottom: 15px;
            border: none;
            padding: 15px 20px;
        }

        :deep(.el-card__body) {
            padding: 0;
            border: none;
        }
    }
}

.company-col {
    margin-bottom: 20px;
}

.company-item {
    height: 100%;
    transition: transform 0.3s;

    &:hover {
        transform: translateY(-5px);
    }
}

.company-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;

    .el-image {
        width: 80px;
        height: 80px;
        object-fit: contain;
        max-width: 100%; /* 确保图片不会超出容器 */
    }
}

.company-name {
    font-size: 16px;
    margin: 0 0 10px;
    text-align: center;
    color: var(--el-text-color-primary);
    word-break: break-word;
    overflow-wrap: break-word;
}

.company-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.company-jobs {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .el-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 优化移动设备显示 */
@media screen and (max-width: 768px) {
    .main-container {
        padding-top: 50px; /* 小屏幕上减少顶部边距 */
    }

    .job-container {
        padding: 10px;
    }

    .filter-section {
        .el-row {
            margin-bottom: 10px;
        }

        .filter-title {
            margin-bottom: 8px;
        }
    }

    .company-logo .el-image {
        width: 60px;
        height: 60px;
    }

    .company-name {
        font-size: 14px;
    }

    .card-header .header-title {
        font-size: 16px;
    }

    /* 确保筛选区域在小屏幕上正确显示 */
    .filter-section .el-row {
        flex-direction: column;
    }

    .filter-section .el-col {
        width: 100% !important;
    }
}
</style>
